<script setup>
import { ref, onMounted } from 'vue'
// 引入echarts
// #ifdef H5
import * as echarts from 'echarts'
// #endif
// #ifdef MP-WEIXIN
const echarts = require('../../static/echarts.min.js')
// #endif

// 定义变量
const tabIndex = ref(0)
const headerTab = [{ name: '核销记录' }, { name: '数据统计' }]
const tabList = [{ name: '日数据' }, { name: '周数据' }, { name: '月数据' }]
const moneyRef = ref(null)
const amountRef = ref(null)
const moneyOption = {
  grid: [
    {
      left: '50',
      top: '30',
      right: '10',
      bottom: '30',
    },
  ],
  color: ['#EA5506'],
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
    name: '单位（元）',
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true,
    },
  ],
}

const amountOption = {
  grid: [
    {
      left: '50',
      top: '30',
      right: '10',
      bottom: '30',
    },
  ],
  color: ['#EA5506'],
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
    name: '单位（次）',
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true,
    },
  ],
}

const tabChange = (index) => {
  console.log(index)
  tabIndex.value = index
}

const renderMoneyChart = async () => {
  if (!moneyRef.value) return
  const myChart = await moneyRef.value.init(echarts)
  myChart.setOption(moneyOption)
}

const renderAmountChart = async () => {
  if (!amountRef.value) return
  const myChart = await amountRef.value.init(echarts)
  myChart.setOption(amountOption)
}

onMounted(() => {
  renderMoneyChart()
  renderAmountChart()
})
</script>

<template>
  <view class="data-board">
    <fes-tabs
      @change="tabChange"
      class="fix-header"
      type="line"
      :data="headerTab"
      :height="100"
    ></fes-tabs>
    <view v-show="tabIndex == 0" class="write-off">
      <detail-card
        style="margin-bottom: 26rpx"
        v-for="(item, index) in 8"
        :key="index"
      ></detail-card>
    </view>
    <view class="content" v-show="tabIndex == 1">
      <view class="statistics">
        <fes-tabs :data="tabList"></fes-tabs>
        <view class="card-list">
          <view class="item">
            <view class="top">金额</view>
            <view class="bottom">3498元</view>
          </view>
          <view class="item">
            <view class="top">次数</view>
            <view class="bottom">212次</view>
          </view>
        </view>
        <view>
          <view class="label-view">
            <view class="line"></view>
            <text>扫码金额</text>
          </view>
          <view class="money">
            <l-echart ref="moneyRef"></l-echart>
          </view>
        </view>
        <view>
          <view class="label-view">
            <view class="line"></view>
            <text>扫码次数</text>
          </view>
          <view class="amount">
            <l-echart ref="amountRef"></l-echart>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.data-board {
  min-height: 100vh;
  background: #f5f5f5;
  box-sizing: border-box;
  padding-bottom: 24rpx;
  padding-top: 100rpx;
  .fix-header {
    position: fixed;
    top: 0;
    width: 100%;
  }
  .write-off {
    box-sizing: border-box;
    padding: 24rpx;
  }
  .content {
    border-radius: 16rpx;
    background: #ffffff;
    margin: 24rpx;
    .statistics {
      box-sizing: border-box;
      padding: 40rpx 24rpx;
      .card-list {
        margin: 40rpx 0;
        display: flex;
        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 140rpx;
          background: #fce7dc;
          border-radius: 12rpx;
          flex: 1;
          .top {
            color: #ea5506;
            font-size: 28rpx;
            font-weight: 400;
            margin-bottom: 6rpx;
          }
          .bottom {
            color: #ea5506;
            font-size: 40rpx;
            font-weight: 500;
          }
        }
        .item:first-child {
          margin-right: 40rpx;
        }
      }
      .label-view {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        .line {
          width: 8rpx;
          height: 30rpx;
          border-radius: 20rpx;
          background: #ea5506;
          margin-right: 8rpx;
        }
        text {
          color: #ea5506;
          font-size: 32rpx;
          font-weight: 400;
        }
      }
    }
  }
}
.limit2 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.limit3 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
</style>
